<template>
     <ElScrollbar>
    <div
        class="menu-container"
        :style="{
            width: containerWidthCom + 'px',
            transition: `width ${aMenuCollapseDuration} `,
        }"
    >
            
            <ElMenu
                :collapse="aIsCollapse"
                :background-color="aMenuBgColor"
                :text-color="aMenuTextColor"
                :active-text-color="aMenuActiveTextColor"
                @open="handleOpen"
                @close="handleClose"
                :collapse-transition="true"
                style="border: none"
            >
                <MyMenuItem
                    v-for="(item, _index) in aMyMenuItemArray"
                    :menu-item-obj="item"
                    :base-path="aBasePath"
                ></MyMenuItem>
            </ElMenu>
        
    </div>
</ElScrollbar>
</template>
<script setup lang="ts">
import MyMenuItem from "./my_menu_item.vue";
import { PropType, computed, onMounted, ref } from "vue";
import { TypeMyMenuItem } from "./my_menu_type";

onMounted(()=>{
   // console.log('in mymenu index mounted');
    
})

type TypeStringOrNumber=number | string

// style="width:100%;height: 100%;"
//#region defineXxx
defineOptions({
    name: "my_menu",
});

const props = defineProps({
    aMyMenuItemArray: {
        type: Array as PropType<TypeMyMenuItem[]>,
        required: true,
    },
    aIsCollapse: {
        type: Boolean,
        default: false,
    },
    aBasePath: {
        type: String,
        default: "",
    },
    aExpendWidth: {
        type: Number || String as PropType<TypeStringOrNumber>,
        default: "100%",
    },
    aCollapseWidth: {
        type: String,
        default: "64",
    },
    aMenuBgColor: {
        type: String,
        // default: '#304156',
        default: 'green',
    },
    aMenuTextColor: {
        type: String,
        default: "#bfcbd9",
    },
    aMenuActiveTextColor: {
        type: String,
        default: "#409eff",
    },
    aMenuCollapseDuration:{
        type:String,
        default:'1.5s'
    }
    // propC:{
    //     type:String as PropType<Object>,
    //     required:true
    // },
});

const emit = defineEmits<{
    event1: [para1: number, para2: string];
    event2: [para1: number, para2: string];
}>();
//#endregion

const containerWidthCom = computed(() => {
    return props.aIsCollapse ? props.aCollapseWidth : props.aExpendWidth;
});

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
</script>
<style lang="scss" scoped>
.menu-container {
    height: 100%;
    // transition: width 1.5s;
}
</style>
